<template>
    <div id="app" style="position: relative;">
        <div>
            <iframe src="" ref="iframe" frameborder="0" class="iframeBox"></iframe>
        </div>
        <div class="headerBox">
            <ul>
                <li>
                    <h3>最新工单</h3>
                    <p @click="editGD()"><a href="#">【LS202307171089】系统给您派发了工单，请及时处理！</a> </p>
                </li>
                <li>
                    <h3>最新告警信息</h3>
                    <p @click="editGD()"><a href="#">2023-05-01 17:42:32 断纤告警：巩义南-涉村，纤芯编号：1</a></p>
                </li>
                <li>
                    <h3>最新租赁信息</h3>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                    <p><a href="#">【22KL0001】:【路段】：巩登段、少洛段，【租赁里程】38.438</a></p>
                </li>
                <li>
                    <h3>小程序二维码</h3>
                    <img src="../../../assets/xcx.jpg" style="width: 130px; height:130px">
                </li>
            </ul>
        </div>
        <div class="dataBox">
            <ul>
                <li class="menu_img glyphicon glyphicon-random">
                    <a @click="goToSystemSet('CommunicationManage/PipeBill')">管线资源管理</a>
                </li>

                <li class="menu_img2 glyphicon glyphicon-warning-sign">
                    <a href="https://ruisheng-software-studio.gitee.io/large-screen-page-3">管线运维大屏</a>
                </li>

                <li class="menu_img2 glyphicon glyphicon-briefcase">
                    <a href="https://ruisheng-software-studio.gitee.io/large-screen-page-2" target="_blank">通信管道大屏</a>
                </li>

                <li class="menu_img3 glyphicon glyphicon-wrench">
                    <a @click="goToSystemSet('system/MenuManage')">系统管理</a>
                </li>
            </ul>
        </div>
        <div class="totalBox">
            <div class="baseBoxLeftBottom">
                <h3>分公司路段信息</h3>
                <e-charts class="chart" :option="option" />
            </div>
            <div class="baseBoxLeftSecondBottom">
                <h3>运营商租赁占比</h3>
                <e-charts class="chart" :option="option1" />
            </div>
            <div class="baseBoxLeftCenterBottom">
                <h3>纤芯质量统计</h3>
                <e-charts class="chart" :option="option2" />
            </div>
            <div class="baseBoxLeftRightBottom">
                <h3>缆段光纤利用率</h3>
                <e-charts class="chart" :option="option3" />
            </div>
        </div>
    </div>
</template>

<script>
import systemRouter from '../../../router/modules/system.js'
export default {
    // components: {},
    data() {
        return {
            urlSrc: 'http://127.0.0.1:5500/index.html',
            systemRouter,
            option: {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['管理里程', '租赁里程'],
                    textStyle: {
                        color: "#666",
                    }
                    // icon: 'none'
                },
                toolbox: {
                    show: true,
                },
                calculable: true,
                xAxis: [{
                    type: 'category',
                    // prettier-ignore
                    data: ['郑州', '南阳', '洛阳', '信阳'],
                    axisLine: {
                        lineStyle: {
                            color: "#666",
                        }
                    }
                }],
                yAxis: [{
                    type: 'value',
                    axisLine: {
                        lineStyle: {
                            color: "#fff",
                        }
                    }
                }],
                series: [{
                    name: '管理里程',
                    type: 'bar',
                    data: [
                        326.49, 578.658, 578.461, 618.243
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                },
                {
                    name: '租赁里程',
                    type: 'bar',
                    data: [
                        126.076, 402, 105, 108
                    ],
                    markPoint: {
                        data: [
                            { type: 'max', name: 'Max' },
                            { type: 'min', name: 'Min' }
                        ]
                    },
                }
                ]
            },
            option1: {
                // legend: {},
                // tooltip: {
                //   textStyle: 'white',
                //   trigger: 'axis',
                //   showContent: false
                // },
                dataset: {
                    source: [
                        ['product', '2019', '2020', '2021', '2022', '2023'],
                        ['中国电信', 56.5, 82.1, 88.7, 70.1, 53.4],
                        ['中国联通', 51.1, 51.4, 55.1, 53.3, 73.8],
                        ['中国有线电视', 40.1, 62.2, 69.5, 36.4, 45.2]
                    ]
                },
                xAxis: {
                    type: 'category',
                    axisLine: {
                        lineStyle: {
                            color: "#666",
                        }
                    }
                },
                yAxis: {
                    gridIndex: 0,
                    axisLine: {
                        lineStyle: {
                            color: "#666",
                        }
                    }
                },
                grid: { top: '55%', left: '15%' },
                series: [
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'line',
                        smooth: true,
                        seriesLayoutBy: 'row',
                        emphasis: { focus: 'series' }
                    },
                    {
                        type: 'pie',
                        id: 'pie',
                        radius: '40%',
                        center: ['50%', '25%'],
                        emphasis: {
                            focus: 'self',
                        },
                        label: {
                            color: '#666',
                            formatter: '{b}: {@2019} ({d}%)',
                        },
                        encode: {
                            itemName: 'product',
                            value: '2019',
                            tooltip: '2019',
                        }
                    }
                ]
            },
            option2: {
                legend: {
                    // top: 'bottom'
                },
                toolbox: {
                    show: false,
                    feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                series: [
                    {
                        name: 'Nightingale Chart',
                        type: 'pie',
                        radius: [50, 80],
                        center: ['50%', '45%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: [
                            { value: 40, name: '质量好' },
                            { value: 38, name: '质量正常' },
                            { value: 32, name: '质量差' },
                            { value: 30, name: '不能用' }]
                    }]
            },
            option3: {
                series: [{
                    type: 'gauge',
                    axisLine: {
                        lineStyle: {
                            width: 30,
                            color: [
                                [0.3, '#67e0e3'],
                                [0.7, '#37a2da'],
                                [1, '#fd666d']
                            ]
                        }
                    },
                    pointer: {
                        itemStyle: {
                            color: 'auto'
                        }
                    },
                    axisTick: {
                        distance: -30,
                        length: 8,
                        lineStyle: {
                            color: '#fff',
                            width: 2
                        }
                    },
                    splitLine: {
                        distance: -30,
                        length: 30,
                        lineStyle: {
                            color: '#fff',
                            width: 4
                        }
                    },
                    axisLabel: {
                        color: 'inherit',
                        distance: 40,
                        fontSize: 15
                    },
                    detail: {
                        valueAnimation: true,
                        formatter: '{value} %',
                        color: 'inherit'
                    },
                    data: [
                        {
                            value: 70
                        }
                    ]
                }
                ]
            },
            tableData: [{
                alarmID: 1,
                alarmName: '纤芯告警',//告警名称
                alarmLevel: '紧急告警',//告警级别
                alarmObject: '一期监测设备',//告警对象
                alarmArea: '鄢陵收费站',//告警区域
                alarmContent: '断纤告警：鄢陵收费站-兰南枢纽，[纤芯编号]：1',//告警描述
                roadName: '鄢陵收费站-兰南枢纽',//光缆段名称
                alarmAddr: '盐洛高速鄢陵收费站',
                // pileNum: 'K485+90',//桩号
                // longitude: "114.33756884679124",//经度
                // latitude: "34.84435271219267",//纬度
                company: "郑州分公司",//所属分公司
                deviceType: "OTDR",//设施类型
                alarmDate: "2023-05-01 17:43:32",//告警时间
                alarmStatusContent: "已完成",//告警状态 文字
                alarmStatus: 6,//告警状态
                masterMaintenance: "张伟",//主维修人员
                slaveMaintenance: "巩凡",//辅助维修人员
                car: "豫A123456",//车辆信息
                maintenanceMoney: "280000元",//维修预算金额
                inventoryList: "",//维修账目清单
                faultCause: '外力因素引发的线路故障'//故障原因
            },
            {
                alarmID: 2,
                alarmName: '纤芯告警',//告警名称
                alarmLevel: '紧急告警',//告警级别
                alarmObject: '二期监测设备',//告警对象
                alarmArea: '鄢陵收费站',//告警区域
                alarmContent: '断纤告警：巩义南-涉村，[纤芯编号]：1',//告警描述
                roadName: '巩义南-涉村',//光缆段名称
                alarmAddr: '焦唐高速巩登段巩义南收费站',
                // pileNum: 'K49+300',//桩号
                // longitude: "114.33756884679124",//经度
                // latitude: "34.84435271219267",//纬度
                company: "郑州分公司",//所属分公司
                deviceType: "OTDR",//设施类型
                alarmDate: "2023-05-01 17:42:32",//告警时间
                alarmStatusContent: "已签收",//告警状态 文字
                alarmStatus: 3,//告警状态
                masterMaintenance: "张三",//主维修人员
                slaveMaintenance: "李四",//辅助维修人员
                car: "豫A123456",//车辆信息
                maintenanceMoney: "280000元",//维修预算金额
                inventoryList: "",//维修账目清单
                faultCause: '挖机施工挖断'//故障原因
            }
            ]
        }
    },
    created() {
        this.initAlarm()
    },
    methods: {
        initAlarm() {
            localStorage.clear()
            //保存localStorage数据
            for (let i = 0; i < this.tableData.length; i++) {
                localStorage.setItem("alarm_" + i, JSON.stringify(this.tableData[i]))
            }
            console.log(localStorage.getItem("alarm_1"));
            // window.location.reload()
        },
        goToSystemSet(url) {
            this.$router.push(url)
        },
        editGD() {
            let routeData = this.$router.resolve({ path: '/alarmDetail', query: { id: 1 } })
            console.log(localStorage.getItem("alarm_1"));
            window.open(routeData.href, '_blank')
        }
    },
    mounted() {
        // console.log(this.systemRouter)
    }

}

</script>

<style lang="scss" scoped>
@import url('../../../assets/css/bootstrap-theme.css');
@import url('../../../assets/css/bootstrap.min.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style-type: none;
}

.iframeBox {
    display: none;
}

.headerBox {
    width: 100%;

    // background-color: pink;
    // justify-content: space-between;
    ul {
        display: flex;

        li {
            float: left;
            height: 176px;
            border: 1px solid #ccc;
            margin-left: 10px;

            p {
                height: 23px;
                line-height: 23px;

                a {
                    font-size: 12px;
                    color: #666
                }
            }

            h3 {
                height: 32px;
                line-height: 32px;
                border-bottom: 1px dotted #ccc;
                font-size: 14px;
                font-weight: 400;
                padding-left: 15px;
            }
        }

        li:nth-child(1) {
            width: 400px;
        }

        li:nth-child(2) {
            flex: 2;
        }

        li:nth-child(3) {
            width: 400px;
        }
    }
}

.dataBox {
    position: absolute;
    margin-left: 10px;
    width: 100%;
    height: 176px;
    top: 200px;
    border: 1px solid #ccc;

    ul {

        // display: flex;
        // justify-content: flex-start;
        li {
            float: left;
            width: 100px;
            height: 100px;
            color: #fff;
            line-height: 100px;
            text-align: center;
            // left: 15px;
            margin-top: 30px;
            margin-left: 10px;
            margin-right: 50px;
            // border: 1px solid pink;    
            font-size: 50px;

            a {
                font-size: 12px;
                position: absolute;
                top: 60px;
                left: 20px;
                color: #666;
                // line-height: 100px;
            }
        }

        .menu_img {
            background: #4ad5ff
        }

        .menu_img2 {
            background: #FFA500
        }

        .menu_img3 {
            background: #00CD66
        }
    }
}

.totalBox {
    display: flex;
    position: absolute;
    margin-left: 10px;
    width: 100%;
    height: 300px;
    top: 400px;
    // left: 10px;
    border: 1px solid #ccc;
    justify-content: space-between;

    .baseBoxLeftBottom,
    .baseBoxLeftSecondBottom,
    .baseBoxLeftCenterBottom,
    .baseBoxLeftRightBottom {
        float: left;
        width: 300px;
        height: 280px;
        // top: 5px;
        left: 10px;
        margin-right: 30px;
        position: relative;
        // top: 74%;
        z-index: 100;

        // border: 1px solid #ccc;
        h3 {
            height: 32px;
            line-height: 32px;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
            font-weight: 400;
            padding-left: 15px;
        }
    }
}

.chart {
    width: 280px;
    height: 270px;
}
</style>
<style lang="scss">
.map_dialog {
    .el-dialog {
        // background: rgba(0, 0, 0, 0.8);
        overflow: hidden;
        border: 2px solid #0efcff;
        border-radius: 5px;
        height: 750px;

        // box-shadow: 0 0 25px 15px rgba(14, 252, 255, 0.5);
        .el-dialog__title {
            color: #666;

            .el-dialog__close {
                color: #666;
            }
        }

        .el-dialog__body {
            padding: 0px 20px 20px;
        }
    }

    .dialog_bottom {
        font-size: 16px;
        line-height: 25px;
        display: flex;
        justify-content: space-between;

        .base_data,
        .pipe_data {
            width: 49%;

            p {
                color: #666;
                // background: rgba(255, 255, 255, 0.2);
                margin: 10px 0;
                width: 99%;
            }

            span {
                color: #666;
            }
        }
    }

    .base_data_bottom {
        width: 90;
        font-size: 16px;
        line-height: 25px;

        p {
            color: #666;
            // background: rgba(255, 255, 255, 0.2);
            margin: 10px 0;
            // width: 99%;
        }

        span {
            color: #666;
        }
    }

    .steps {
        float: left;
        width: 100%;
        color: #666;
        font-size: 15px;

        .step {
            display: flex;
            justify-content: start;

            .icon {
                position: relative;
                width: 30px;
                height: 40px;

                .point {
                    position: absolute;
                    top: 11px;
                    left: 1px;
                    z-index: 99;
                    width: 17px;
                    height: 17px;
                    background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
                    border-radius: 17px;
                }

                .lease {
                    background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
                }

                .line {
                    position: absolute;
                    left: 10px;
                    top: 0;
                    width: 1px;
                    height: 40px;
                    background: red;
                }
            }

            .detail {

                // border: 1px solid pink;
                span {
                    line-height: 40px;
                    display: block;
                    float: left;
                }

                .operTime {
                    width: 200px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .state {
                    width: 80px;
                }

                .user {
                    width: 80px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .notes {
                    width: 100px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

            }

            .current {
                color: red;
            }
        }
    }
}

.form-control1 {
    background-color: #f5f5f5;
    border: 0;
    // -webkit-box-shadow: none;
    box-shadow: none;
}

.dialog_btn {
    display: flex;
    justify-content: start;

    .btn_group1 {

        // width: 50px;
        // height: 35px;
        // margin: 10px 0 15px;
        // display: inline-block;
        button {
            width: 90px;
            height: 45px;
            border: 1px solid rgb(208, 18, 18);
            border-radius: 3px;
            color: #fff;
            background: transparent;
            margin-right: 10px;
        }

        .active {
            color: #000;
        }
    }
}
</style>
